<style>
    @import "./less/UserRoleDetails.less";
</style>
<template>
    <div>
        <Row>
            <Col span="24">
                <Card>
                    <Row class-name="made-child-con-middle" type="flex" align="middle">
                        <div>
                            <b class="card-user-infor-name">{{user.username}}</b>
                        </div>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Row>
            <Col span="18" push="6">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-checkbox-outline"></Icon>
                        已分配角色
                    </p>
                    <div class="to-do-list-con">
                        <Row type="flex" justify="start" class="code-row-bg">
                            <Col v-for="(item, index) in toDoList1">
                                <Tag type="dot" color="blue">{{item.roleName}}</Tag>
                            </Col>
                        </Row>
                    </div>
                </Card>
            </Col>
            <Col span="6" pull="18">
                <Card>
                    <p slot="title" class="card-title">
                        <Icon type="android-checkbox-outline"></Icon>
                        可分配角色
                    </p>
                    <div class="to-do-list-con">
                        <div v-for="(item, index) in toDoList2" :key="'todo-item' + (toDoList2.length - index)" class="to-do-item">
                            <to-do-list-item :todoitem="item.todoitem" :id="item.id" :code="item.roleCode" :content="item.roleName" v-on="{handleHasDid:handleHasDid}"></to-do-list-item>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import toDoListItem from '@/views/home/components/toDoListItem.vue';
    export default {
        components: {
            toDoListItem
        },
        data () {
            return {
                id: '',
                user: {},
                baseURL: '/user/role',
                toDoList1: [],
                toDoList2: []
            };
        },
        methods: {
            handleHasDid (roleId, todoitem) {
                let url = this.baseURL + '/addRole'
                this.$ajax.post(url, {
                    userId: this.id,
                    roleId: roleId,
                    todoitem: todoitem
                }).then((response) => {
                    let {code} = response.data
                    if (code === 0) {
                        this.init()
                    }
                }, this)
            },
            init () {
                this.toDoList1 = []
                this.toDoList2 = []
                if (this.$route.query.id) {
                    this.id = this.$route.query.id
                    this.user = this.$route.query.user
                    let url = this.baseURL + '/getUserRole/' + this.id
                    this.$ajax.get(url).then((response) => {
                        let {code, params} = response.data
                        if (code === 0) {
                            this.toDoList1 = params.userRoles
                            this.toDoList2 = params.allRoles
                        }
                    }, this)
                } else {
                    this.$bus.modal('warning', '系统提示', '页面已失效,请重新打开')
                }
            }
        },
        mounted () {
            this.init()
        },
        watch: {
            '$route' (to) {
                if (to.name === 'system_user_role') {
                    this.init()
                }
            }
        }
    }
</script>

<style>
</style>
